import React, { useEffect, useState } from 'react'; 
import 'antd/dist/antd.less';
import axios from 'axios'
import { Carousel } from 'antd';
const Banner = () => {
    const [banner, setBanner] = useState([])
    const getBanner = async () => {
        var res = await axios.get('http://122.112.161.135:3000/banner')
        setBanner(res.data.banners)
    }
    useEffect(() => {
        getBanner()
    });
    const pic = {
        width: '750px'
    }
    return (
        <div><Carousel effect="fade" autoplay>
            {banner.map((item,index) => {
                    return (
                        <div key={index}>
                            <img style={pic} src={item.imageUrl} alt="" />
                            
                        </div>
                    )
                })}
        </Carousel>

        </div>
    );
}

export default Banner;
